<template>
  <div class="security-wrapper">
    <el-row>
      <el-col>
        <div class="title">安全设置</div>
        <el-divider />
        <el-form
          label-position="right"
          :model="pwdForm"
          size="medium"
          :rules="pwdFormRules"
          ref="$pwdForm"
          label-width="70px"
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="pwdForm.oldPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="pwdForm.newPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repeatPassword">
            <el-input v-model="pwdForm.repeatPassword" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="setPassword()">
              保存密码
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Security"
}
</script>

<script setup>
import {ref, reactive, nextTick} from 'vue'
import {useStore} from 'vuex'
import {ElMessage} from "element-plus";
const pwdForm = reactive({
  oldPassword: '',
  newPassword: '',
  repeatPassword: ''
})
const $pwdForm = ref(null)
const validateOldPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入旧密码！'))
  } else {
    callback()
  }
}
const validateNewPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码！'))
  } else {
    if (pwdForm.repeatPassword !== '') {
      $pwdForm.value.validateField('checkPass')
    }
    callback()
  }
}
const validateRepeatPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码！'))
  } else if (value !== pwdForm.newPassword) {
    callback(new Error("两次输入的密码不一致！"))
  } else {
    callback()
  }
}
const pwdFormRules = reactive({
  oldPassword: [{ validator: validateOldPassword, trigger: 'change' }],
  newPassword: [{ validator: validateNewPassword, trigger: 'blur' }],
  repeatPassword: [{ validator: validateRepeatPassword, trigger: 'blur' }],
})

const store = useStore()
let loading = ref(false)
const setPassword = async () => {
  $pwdForm.value.validate((valid) => {
    if(!valid) {
      return null
    }
  })
  loading.value = true
  try {
    await store.dispatch('user/setSelfPassword', {
      oldPassword: pwdForm.oldPassword,
      newPassword: pwdForm.newPassword
    })
    ElMessage({
      type: 'success',
      message: '密码修改成功',
      center: true,
      duration: 2000
    })
    $pwdForm.value.resetFields()
    await nextTick(() => {
      $pwdForm.value.clearValidate('oldPassword')
    })
  } catch(e) {
    console.log('修改密码失败：', e)
    ElMessage({
      type: 'error',
      message: `修改密码失败：${e.message}`,
      center: true,
      duration: 2000
    })
  }
  loading.value = false
}

</script>

<style scoped lang="sass">
.security-wrapper
  .title
    color: #515a6e
    font-size: 1.5em
    font-weight: bold
</style>
